<template>
  <div class="app">
    <h1 :style="{ marginLeft: marginLeft() }">app</h1>
    <h1 class="title">app</h1>
    <button @click="toggle">toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const flag = ref(false)

const toggle = () => {
  flag.value = !flag.value
}

const marginLeft = () => {
  return flag.value ? 0 : '200px'
}
</script>

<style scoped>
.title {
  margin-left: v-bind('marginLeft()');
  transition: margin-left 1s;
}
</style>
